<!-- 市外安全评价检测机构信息库 -->
<template>
    <div>
        <page-main>
            <!-- 头部搜索板块 -->
            <div style="margin-top: 15px; padding-left: 10px;">
                <el-input v-model="agentName" class="search" size="medium" clearable style="border-radius: 15px; overflow: hidden; vertical-align: bottom;" placeholder="请输入机构名称" />
                <el-date-picker v-model="searchTime" class="search" size="medium" clearable type="year" format="yyyy" value-format="yyyy" placeholder="选择年份" style="border-radius: 15px; overflow: hidden; margin-left: 10px; vertical-align: bottom;" />
                <el-button type="primary" size="small" round icon="el-icon-search" style="margin-left: 20px;" @click="initSafety">搜索</el-button>
                <el-button type="add" icon="el-icon-plus" style="float: right; margin-right: 50px;" @click="showAddMechView">添加入渝技术服务信息</el-button>
            </div>
            <!-- 中间表格板块 -->
            <div style="margin-top: 20px;">
                <el-table v-loading="loading" :data="safety" stripe border style="width: 100%;" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
                    <el-table-column prop="agentName" label="机构名称" align="center" />
                    <el-table-column prop="businessScope" label="业务范围" align="center" />
                    <el-table-column prop="web" label="公司官网" align="center" />
                    <el-table-column prop="funding" label="注册资金（万元）" align="center" />
                    <el-table-column prop="workAddress" label="办公地址" align="center" />
                    <el-table-column prop="registrationTime" label="登记日期" align="center" />
                    <el-table-column fixed="right" label="操作" align="center" width="160">
                        <template slot-scope="scope">
                            <el-button type="primary" plain size="mini" @click="openDetails(scope.row)">详情</el-button>
                            <el-button type="danger" size="mini" @click="deleteMechs(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="display: flex; justify-content: flex-end; margin-top: 20px;">
                    <el-pagination background layout="sizes, prev, pager, next,jumper, ->, total" :total="total" @current-change="currentChange" @size-change="sizeChange" />
                </div>
            </div>
        </page-main>
    </div>
</template>

<script>
import {Message} from 'element-ui'

export default {
    name: 'SafetyEvaluationOrganizationIndex',
    data() {
        return {
            agentName: '',
            searchTime: '',
            legalRep: '',
            safety: [],
            loading: false,
            total: 0,
            page: 1,
            size: 10
        }
    },
    created() {
        this.initSafety()
    },
    methods: {
        openDetails(data) { // 点击跳转查看详情页面
            this.$router.push({path: '/outside_safety_evaluation_organization/details', query: data})
        },
        showAddMechView() { // 添加安全评估机构按钮绑定事件
            this.$router.push({path: '/outside_safety_evaluation_organization/addExternalAgent'})
        },
        deleteMechs(data) { // 删除一条信息
            this.$confirm('此操作将永久删除  ' + data.agentName + ', 是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest('/system/externalAgent/deleteExternalTechService/', data.id).then(resp => {
                    if (resp) {
                        Message.success('删除成功')
                        this.initSafety()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },
        initSafety() { // 分页获取市外安全评价检测机构信息
            var obj = {page: this.page, size: this.size, nameWord: this.agentName, yearTime: (this.searchTime).toString()}
            this.getRequest('/system/externalAgent/getExternalTechService', obj).then(resp => {
                if (resp) {
                    this.safety = resp.data.data
                    this.total = resp.data.total
                }
            })
        },
        sizeChange(size) { // 分页页数
            this.size = size
            this.initSafety()
        },
        currentChange(currentPage) { // 分页当前页触发
            this.page = currentPage
            this.initSafety()
        }
    }
}
</script>

<style lang="scss" scoped>
.search { // 搜索框
    border: solid #0080ff;
    width: 250px;
    border-radius: 12px;
}
::v-deep .el-icon-search { // 搜索的图标
    color: #fff;
    font-size: 20px;
    font-weight: bolder;
}
.el-button--add { // 添加机构按钮
    background-color: rgb(250, 136, 136);
    color: #f5f2f0;
}
</style>

